<template>
  <div class="main">
    <div>
      <menu-bar-pc :selectedIndex.sync="selectedIndex" :items="categories" :itemClick="menuItemClick"></menu-bar-pc>
    </div>
    <div>
      <div class="collection collection-shop">
        <div class="container">
          <div class="cell" v-for="(item, index) in items" :key="index" @click="itemClick(item)">
            <a-image :src="item.cover" />
            <v-clamp class="cell-headline" autoresize :max-lines="2">{{ item.name }}</v-clamp>
            <p class="cell-subhead">￥{{ item.retailPrice > 0 ? item.retailPrice + item.unitId : '商议' }}</p>
          </div>
        </div>
      </div>

      <a-pagination
        background
        layout="prev, pager, next"
        :current="currentPage"
        :page-size="pageSize"
        :total="totalCount"
        @change="paginationOnChange"
      >
      </a-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      isLoading: false,
      selectedIndex: 0,
    }
  },
  computed: {
    ...mapState('goods', {
      categories: (state) => state.categories,
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      totalCount: (state) => state.totalCount,
      currentPage: (state) => state.currentPage,
      originalPage: (state) => state.originalPage,
    }),
  },

  created() {
    const that = this
    this.getGoodsCategoryListAction({ pageNo: 1, pageSize: 99 }).catch((error) => {
      that.$message.error(error.message)
    })
    this.updateList()
  },

  methods: {
    ...mapActions('goods', [
      'getGoodsCategoryListAction',
      'getGoodsListAction',
      'updateCurrentPageAction',
      'updateOriginalPageAction',
    ]),

    itemClick(item) {
      this.$router.push({
        path: '/goods/detail',
        query: { id: item.id },
      })
    },

    menuItemClick(item, index) {
      this.selectedIndex = index
      this.updateCurrentPageAction(1)

      this.updateList()
    },

    paginationOnChange(value) {
      console.log('\n\n  = ' + 'paginationOnChange' + '\n\n')
      this.updateCurrentPageAction(value)
      this.updateList()
    },

    updateList() {
      const that = this
      const item = this.categories[this.selectedIndex]
      var categoryId = null
      if (item) {
        categoryId = item.id
      }
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        // categoryId: this.searchKeywords ? null : categoryId,
        categoryId: categoryId,
        // name: this.searchKeywords,
      }
      const isRefresh = true
      const isPC = true
      this.getGoodsListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message)
      })
    },
  },
}
</script>

<style scoped lang="less"></style>
